
<template>
  <div class="CommonFormCreate">
    <div v-for="item in options" :key="item.field" class="item" :class="[item.type, { disabled: isView || item.disabled }]" >
      <template v-if="item.type === TYPE.INPUT">
        <CommonInput
          v-model="currentValue[item.field]"
          :label="item.title + ':'"
          :placeholder="item.placeholder"
          :required="item.required"
          :width="item.width"
        />
      </template>
      <template v-if="item.type === TYPE.TEXTAREA">
        <CommonTextarea
          v-model="currentValue[item.field]"
          :label="item.title + ':'"
          :placeholder="item.placeholder"
          :required="item.required"
          :placeholdeStyle="item.placeholdeStyle"
        />
      </template>
      <template v-if="item.type === TYPE.SELECT">
        <CommonSelect
          v-model="currentValue[item.field]"
          :options="item.options"
          :dictType="item.dictType"
          :label="item.title + ':'"
          :mode="item.mode || 'selector'"
          :isView="isView"
          :required="item.required"
          :disabled="item.disabled"
        />
      </template>
      <template v-if="item.type === TYPE.SWITCH">
        <CommonSwitch
          v-model="currentValue[item.field]"
          :label="item.title + ':'"
          :isView="isView"
          :required="item.required"
        />
      </template>
      <template v-if="item.type === TYPE.IMG_UPLOAD">
        <CommonPictureUpload
          v-model="currentValue[item.field]"
          :isView="isView"
          :required="item.required"
        />
      </template>
      <template v-if="item.type === TYPE.FILE_UPLOAD">
        <CommonFileUpload
          v-model="currentValue[item.field]"
          :isView="isView"
          :required="item.required"
        />
      </template>
      <template v-if="item.type === TYPE.SEARCH_SELECT">
        <CommonSearchSelect
          v-model="currentValue[item.field]"
          :nameValue="currentValue[item.nameField]"
          :placeholder="item.placeholder"
          :label="item.title + ':'"
          :required="item.required"
          :searchType="item.searchType"
          :zIndex="item.zIndex"
        />
      </template>
      <template v-if="item.type === TYPE.DATE_SELECT">
        <CommonDateTimePicker
          v-model="currentValue[item.field]"
          :label="item.title + ':'"
          :required="item.required"
          :placeholder="item.placeholder"
          :width="item.width"
        />
      </template>
      <template v-if="item.type === TYPE.RATE">
        <CommonRate
          v-model="currentValue[item.field]"
          :label="item.title + ':'"
          :required="item.required"
        />
      </template>

    </div>
  </div>
</template>

<script>
import TYPE from './CommonFormCreateType'
import CommonSelect from './CommonSelect'
import CommonInput from './CommonInput'
import CommonTextarea from './CommonTextarea'
import CommonSwitch from './CommonSwitch'
import CommonPictureUpload from './CommonPictureUpload'
import CommonFileUpload from './CommonFileUpload'
import TreeSelect from './TreeSelect'
import CommonSearchSelect from './CommonSearchSelect'
import CommonDateTimePicker from './CommonDateTimePicker'
import CommonRate from './CommonRate'
import Toast from '@/utils/Toast'
import isEqual from 'lodash.isequal'
import cloneDeep from 'lodash.clonedeep'

export default {
  components: {
    CommonSelect,
    CommonPictureUpload,
    TreeSelect,
    CommonInput,
    CommonSearchSelect,
    CommonSwitch,
    CommonDateTimePicker,
    CommonTextarea,
    CommonFileUpload,
    CommonRate,
  },
  props: {
    value: {
      type: Object,
      required: true,
    },
    options: {
      type: Array,
      required: true,
    },
    isView: {
      type: Boolean,
    },
  },
  data () {
    return {
      TYPE,
      currentValue: {},
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler () {
        if (!isEqual(this.value, this.currentValue)) {
          this.currentValue = cloneDeep(this.value)
        }
      },
    },
    currentValue: {
      deep: true,
      handler () {
        this.$emit('input', cloneDeep(this.currentValue))
      },
    },
  },
  methods: {
    $validate () {
      return new Promise((resolve, reject) => {
        const map = {}
        this.options.forEach(item => {
          if (item.required) {
            map[item.field] = item.title
          }
        })
        for (const item of Object.keys(map)) {
          const value = this.currentValue[item]
          if (!value || (Array.isArray(value) && !value.length)) {
            Toast(map[item] + '为必填项')
            reject(new Error())
          }
        }
        resolve()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonFormCreate {
	.item {
		position: relative;

		&.disabled {
			filter: grayscale(100%);
		}

		&.disabled::after {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background: transparent;
			content: '';
		}

		&.disabled.IMG_UPLOAD {
			filter: none;
		}

		&.disabled.SUB_STEP_LINK {
			width: 0;
			height: 0;
			filter: none;
		}

		&.disabled.IMG_UPLOAD::after,
		&.disabled.SUB_STEP_LINK::after {
			width: 0;
			height: 0;
		}
	}
}
</style>
